
import React, { useState } from 'react';
import { Button, Modal, Form, Input, Radio } from 'antd';

const CommonModal = ({data}) => {

    const CollectionCreateForm = ({ visible, onCreate, onCancel }) => {
        const [form] = Form.useForm();
        return (
            <Modal
                visible={visible}
                title={data.title}
                okText={data.yesText}
                cancelText={data.noText}
                onCancel={onCancel}
                onOk={() => {
                    form.validateFields()
                        .then((values) => {
                            form.resetFields();
                            onCreate(values);
                        })
                        .catch((info) => {
                            console.log('Validate Failed:', info);
                        });
                }}
            >
                <Form
                    form={form}
                    layout="vertical"
                    name="form_in_modal"
                    initialValues={{
                        modifier: 'public',
                    }}
                >
                    {
                        data.items.map(item => {
                            return(
                                <Form.Item key={item.name} label={item.label} name={item.name} rules={item.rules || []}>
                                    <Input />
                                </Form.Item>
                            )
                        })
                    }
                </Form>
            </Modal>
        );
    };

    const  CollectionsPage = () => {
        const [visible, setVisible] = useState(false);

        const onCreate = (values) => {
            data.addFunc(values)
            window.location.reload()
            setVisible(false);
        };

        return (
            <div>
                <Button type="primary" shape="round"  size={data.btnSize || 'small'} onClick={() => {
                    setVisible(true);
                }}> {data.btnText} </Button>

                <CollectionCreateForm
                    visible={visible}
                    onCreate={onCreate}
                    onCancel={() => {
                        setVisible(false);
                    }}
                />
            </div>
        );
    };
    return CollectionsPage()
}


export default CommonModal
